<template>
  <div class="container">
    <!-- 上方 -->
    <div class="above">
      <el-button type="primary" size="small" @click="newSchoolAdminVisible = true"
        class="custom-button">新增院校管理员</el-button>
      <label for="">
        姓名:
        <!-- <el-input v-model="input" placeholder="Please input" clearable /> -->
        <input type="text" v-model="inputText" />
      </label>
      <el-form-item label="">
        <el-select v-model="id" placeholder="请选择学校" clearable size="large" style="width: 250px; height: 25px;">
          <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
        </el-select>
      </el-form-item>
      <el-button type="primary" size="small" @click="reset">重置</el-button>
    </div>
    <!-- 下方表格 -->
    <div class="below">
      <el-table :data="filterSchoolAdminList" style="width: 100%" class="my-table">
        <el-table-column fixed prop="user.real_name" label="姓名" align="center" />
        <el-table-column prop="user.username" label="账号" align="center" />
        <el-table-column prop="school.school_name" label="所属学校" align="center" />
        <el-table-column prop="user.phone" label="电话" align="center" />
        <el-table-column prop="user.email" label="邮箱" align="center" />
        <el-table-column prop="user.date_joined" label="创建时间" align="center" />
        <el-table-column prop="user.is_active" label="状态" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.user.is_active" @change="updateState(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="right" label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" round @click="editSchoolAdmin(scope.row)">修改</el-button>
            <el-button type="danger" size="small" round @click="resetpassword(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- 新增对话框 -->
      <el-dialog v-model="newSchoolAdminVisible" title="新增院校管理员" width="40%" draggable>
        <el-form>
          <el-form-item label="真实姓名:" :label-width="formLabelWidth">
            <el-input v-model="realname" autocomplete="off" placeholder="输入真实姓名" />
          </el-form-item>
          <el-form-item label="所属学校:" :label-width="formLabelWidth">
            <el-select v-model="id" placeholder="请选择学校" clearable size="large" style="width: 250px; height: 25px;">
              <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
            </el-select>
          </el-form-item>
          <el-form-item label="个人电话:" :label-width="formLabelWidth">
            <el-input v-model="phone" autocomplete="off" placeholder="输入个人电话" />
          </el-form-item>
          <el-form-item label="个人邮箱:" :label-width="formLabelWidth">
            <el-input v-model="email" autocomplete="off" placeholder="输入个人邮箱" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="newschoolAdmin">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <div>
      <!-- 修改对话框 -->
      <el-dialog v-model="editSchoolAdminVisible" title="编辑院校管理员" width="40%" draggable>
        <el-form>
          <el-form-item label="真实姓名:" :label-width="formLabelWidth">
            <el-input v-model="realname" autocomplete="off" placeholder="输入真实姓名" />
          </el-form-item>
          <el-form-item label="所属学校:" :label-width="formLabelWidth">
            <el-select v-model="id" placeholder="请选择学校" clearable size="large" style="width: 250px; height: 25px;"
              disabled>
              <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
            </el-select>
          </el-form-item>
          <el-form-item label="个人电话:" :label-width="formLabelWidth">
            <el-input v-model="phone" autocomplete="off" placeholder="输入个人电话" />
          </el-form-item>
          <el-form-item label="个人邮箱:" :label-width="formLabelWidth">
            <el-input v-model="email" autocomplete="off" placeholder="输入个人邮箱" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="updateSchoolAdmin()">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import {
  getSchooladminList,
  createSchoolAdmin,
  getUser,
  updateUserActiveState,
  resetPassword,
} from "@/api/userApi";
import { mapActions, mapState } from 'vuex';
import { timePanelSharedProps } from "element-plus/es/components/time-picker/src/props/shared";
export default {
  async created() {
    this.fetchschoolList();
    try {
      // 调用异步函数，并等待api请求获取学校管理员信息完毕
      const res = await getSchooladminList();
      console.log(res);
      this.schoolAdminList = res;
    } catch (error) {
      ElMessage({
        message: error,
        type: "warning",
      });
    }
  },
  data() {
    return {
      newSchoolAdminVisible: false,
      editSchoolAdminVisible: false,
      selectedSchool: '', // 用于绑定选中的学校名称
      schoolAdminList: [],
      // 筛选后的学习管理员
      filterSchoolAdminList: [],
      //定义正在编辑的schooladmin
      editingSchoolAdmin: null,
      inputText: "",
      realname: "",
      id: "",
      phone: "",
      email: "",
    }
  },
  // 计算属性
  computed: {
    ...mapState(["schoolList"]),
    // 筛选
    filterSchoolAdminList() {
      // 使用filter进行对schoolList中的数据进行筛选
      return this.schoolAdminList.filter((schoolAdmin) => {
        if (this.inputText != "") {
          return schoolAdmin.user.real_name.indexOf(this.inputText) >= 0;
        }
        else
          if (this.id != "") {
            return schoolAdmin.school.id == this.id;
          }
          else {
            return schoolAdmin;
          }
        // indexOf是否包含当前的字符
        // return schoolAdmin.user.real_name.indexOf(this.inputText) >= 0 | schoolAdmin.school.id === this.id;
      });
    },

  },
  // 方法
  methods: {
    ...mapActions(["fetchschoolList"]),
    // 搜索框重置
    reset() {
      this.inputText = "";
      this.id = "";
    },
    // 取消按钮
    cancel() {
      this.newSchoolAdminVisible = false;
      this.editSchoolAdminVisible = false;
      this.realname = "";
      this.id = "";
      this.phone = "";
      this.email = "";
    },
    // 添加学校
    newschoolAdmin() {
      createSchoolAdmin(this.realname, this.id, this.phone, this.email).then((res) => {
        // 把数据push给表格
        this.schoolAdminList.push(res);
        ElMessage({
          message: "创建成功",
          type: "success",
        });

      }
      ).catch((error) => {
        ElMessage({
          message: "创建失败" + error,
          type: "warning",
        });
      })
      this.realname = "";
      this.id = "";
      this.phone = "";
      this.email = "";
      this.newSchoolAdminVisible = false;
    },
    //获取当前行的数据并打开对话框
    editSchoolAdmin(schoolAdmin) {
      this.editingSchoolAdmin = schoolAdmin;
      this.realname = schoolAdmin.user.real_name;
      this.id = schoolAdmin.school.school_name;
      this.phone = schoolAdmin.user.phone;
      this.email = schoolAdmin.user.email;
      this.editSchoolAdminVisible = true;
    },
    //修改当前状态
    updateState(schoolAdmin) {
      updateUserActiveState(schoolAdmin.user.id, schoolAdmin.user.is_active).then(() => {
        ElMessage({
          message: "状态修改成功",
          type: "success",
        });
      })
        .catch((error) => {
          ElMessage({
            message: error,
            type: "warning",
          });
        });
    },
    updateSchoolAdmin() {
      if (
        this.editingSchoolAdmin.user.real_name == this.realname &&
        // this.editingSchoolAdmin.id == this.id &&
        this.editingSchoolAdmin.user.phone == this.phone &&
        this.editingSchoolAdmin.user.email == this.email
      ) {
        ElMessage({
          message: "您没有修改内容",
          type: "warning",
        });
        return this.cancel();
      }
    },
    // 重置密码
    resetpassword(schoolAdmin) {
      resetPassword(schoolAdmin.user.id).then(() => {
        ElMessage({
          message: "重置成功",
          type: "success",
        });
      }).catch((error) => {
        ElMessage({
          message: "重置失败" + error,
          type: "warning",
        });
      })
    }
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-flow: column nowrap;
  /* 对称轴(左右居中) */
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.above {
  height: 100px;
  width: 100%;

  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  ;

  .custom-button {
    width: 100px;
    height: 40px;
  }
}

.below {
  height: 100%;
  width: 95%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: flex-start;

  /* 样式表中定义表格的样式 */
  .my-table {
    height: 100%;
    width: 100%;
    border: 1.5px solid #949393;
    /* 设置表格边框颜色 */
  }

}

.above .el-button {
  width: 70px;
  height: 28px;
  margin: 22px;
}

.above label {
  margin: 20px;
  font-size: 18px;

  input {
    width: 250px;
    height: 34px;
  }
}

.above .el-input {
  --el-input-width: 300px;


}

.above .el-select {
  --el-select-width: 220px;

}
</style>